
import React, { FC, useEffect, useState } from 'react';
import styled from 'styled-components';
import { Button, Card, Descriptions, Radio, RadioChangeEvent, Space, Table, Input } from 'antd';
import { modelOllamaGetModels, modelOllamaPullModel, OllamaModel } from '@/services/local';
const { Search } = Input;

export interface OllamaSettingPageProps {
}


export const OllamaSettingPage: FC<OllamaSettingPageProps> = (props) => {
    const [loading, setLoading] = useState<boolean>(false);

    const [models, setModels] = useState<Array<OllamaModel>>([]);

    const [page, setPage] = useState<number>(1);

    const [pageSize, setPageSize] = useState<number>(10);

    const [total, setTotal] = useState<number>(0);

    const [category, setCategory] = useState<string>('all');

    const [filter, setFilter] = useState<string>('');

    const columns = [
        {
            title: '模型',
            dataIndex: 'name',
            key: 'name',
            width: '140px',
            ellipsis: true,
        },
        {
            title: '大小',
            dataIndex: 'objectType',
            key: 'objectType',
            width: '90px',
            ellipsis: true,
        },
        {
            title: '功能',
            dataIndex: 'tags',
            key: 'tags',
            width: '120px',
            ellipsis: true
        },
        {
            title: '简介',
            dataIndex: 'description',
            key: 'description',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '操作',
            dataIndex: '操作',
            key: '操作',
            render: (_, record, index) => {
                return (
                    <Space size="middle" key={record.identifier + index}>
                        {
                            record.installed ? (
                                <Button
                                    type={'primary'}
                                    size={'small'}
                                    danger
                                    onClick={async () => {
                                    }}
                                >卸载</Button>
                            ) : (
                                <Button
                                    type={'primary'}
                                    size={'small'}
                                    onClick={async () => {
                                        let res = await modelOllamaPullModel(record.name);
                                        console.log(res);
                                    }}
                                >安装</Button>
                            )
                        }
                    </Space>
                );
            }
        },
    ];

    const refresh = async () => {
        let res = await modelOllamaGetModels();
        setModels(res);
        setTotal(res.length);
    };
    useEffect(() => {
        refresh();
    }, []);

    return <Container>
        <StyledCard
            title={'Ollama配置'}
            style={{ height: '100%' }}
            styles={{
                body: {
                    padding: '6px 6px',
                    overflow: 'auto',
                    height: 'calc(100% - 10px)',
                    width: 'calc(100% - 10px)',
                }
            }}
            extra={[
                <Header>
                    <Search
                        style={{
                            flex: 1
                        }}
                        styles={{}}
                        placeholder="Filter"
                        allowClear={true}
                        onChange={(event) => {
                            setFilter(event.target.value);
                        }} onSearch={(value) => {
                            setFilter(value);
                        }} />
                    <Radio.Group
                        options={
                            [
                                { label: '所有', value: 'all' },
                                { label: 'LLM', value: 'llm' },
                                { label: 'Vision', value: 'vision' },
                                { label: 'Embedding', value: 'embedding' },
                                { label: 'Tools', value: 'tools' },
                                { label: '已安装', value: 'installed' },
                            ]
                        }
                        onChange={({ target: { value } }: RadioChangeEvent) => {
                            console.log('radio4 checked', value);
                            setCategory(value);
                        }}
                        value={category}
                        optionType="button"
                        buttonStyle="solid"
                    />
                </Header>
            ]}
        >
            <Table
                bordered
                loading={loading}
                rowKey={'identifier'}
                pagination={{
                    showSizeChanger: true,
                    total: total,
                    current: page,
                    pageSize: pageSize,
                    onChange: (page, pageSize) => {
                        setPage(page);
                    },
                    onShowSizeChange: (current, size) => {
                        setPageSize(size);
                    }
                }}
                dataSource={models} columns={columns} />
        </StyledCard>
    </Container>
}

const Container = styled.div`
    width: 100%;
    height: 100%;
    padding:10px;
    padding-top:30px;
`;

const Header = styled.div`
    height: 45px;
    width: 100%;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
`;

const StyledCard = styled(Card)`
    width: 100%;
`

